<template>
	<view class="wid90 mar mar-top20 borRad20" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 25rpx 0;">
		<view class="wid95 mar">
			<view class="poRel mar-bott30">
				<view class="dis disAl disJuB fowe600 foSi30 poRel" style="z-index: 2;">热门服务</view>
				<view class="poAbs" :style="'background: '+theme.main_color+''" style="bottom: 0;width: 91rpx;height: 12rpx;;z-index: 1;">
				</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="lower" style="height: auto; max-height: 1000px;">
				<wsj v-if="lists.length == 0" zs='1'></wsj>
				<block v-for="(item,index) in lists" :key="index">
					<view class="dis" @click="tiaozhuan('/pages/serve/serve?id='+item.id)">
						<view style="width: 25%;height: 144rpx;">
							<image :lazy-load="true" :src="item.cover_img" class="hei100 borRad10" style="width: 144rpx;" mode="aspectFill"></image>
						</view>
						<view style="width: 75%;">
							<view class="dis disAl disJuB">
								<view class="foSi28 fowe600">{{item.name}}</view>
								<view class="foSi20" style="color: #878787;">{{item.all_sales}}人已预约</view>
							</view>
							<view class="foSi20 webkitLineClamp mar-top10" style="color: #878787;">正规绿色按摩服务</view>
							<view class="mar-top20 dis disJuB" style="align-items: flex-end;">
								<view class="dis disAl">
									<view class="foSi15 coFFF tim1" :style="'background-color: '+theme.seco_color+';'">{{item.duration}}分钟</view>
									<view class="mar-left10">
										<view class="foSi20" style="vertical-align: bottom;color: #FF0000;">
											<span>¥</span>
											<span class="fowe600 foSi30">{{item.price}}</span>
											<span class="foSi15 mar-left10 poRel" style="color: #A6A6A6;">
												<span>¥</span>
												<span class="fowe600 foSi20">{{item.orig_price}}</span>
												<view class="wid100 poAbs" style="height: 1rpx;background-color: #A6A6A6;top: 40%;left: 0;"></view>
											</span>
										</view>
									</view>
								</view>
								<view class="dis disAl disJuC foSi22 coFFF butt2" :style="'background-color: '+theme.main_color+';'"
									@click.stop="tiaozhuan('/pages/serve/technicianSelective?id='+item.id)">选择技师</view>
							</view>
						</view>
					</view>
					<view class="hei20"></view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		props:{
			list: {
				type: Array,
				default: [],
				last_page:0,
				page: 1,
			}
		},
		data() {
			return {
				url: this.global.url,
				lists:[],
				theme: null
			}
		},
		created() {
			var that = this;
			that.updateList()
			that.theme = uni.getStorageSync('theme')
		},
		methods: {
			updateList(){
				this.page = 1
				this.lists = this.list;
			},
			getList(){
				var that = this;
				console.log(that.lists);
				uni.request({
					url: that.global.url + '/api/qianyu_smfw/service/lists',
					method: "POST",
					header: {
						'site-id': that.global.site_id//自定义请求头信息
					},
					data: {
						sort: 0,
						page: that.page,
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.last_page = result.data.last_page
							if(that.page == 1){
								that.lists = result.data.data
							}else{
								that.lists = that.lists.concat(result.data.data)
							}
							console.log(that.lists);
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			tiaozhuan(url) {
				var that = this
				uni.navigateTo({
					url: url
				})
				// var userinfo = uni.getStorageSync('userinfo')
				// if(!userinfo && url == '/pages/index/activity'){
				// 	uni.switchTab({
				// 		url: '/pages/wode/wode'
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// }
			}
		}
	}
</script>

<style>
	.tim1{
		padding: 10rpx;
		border-radius: 5rpx;
	}
	.butt2{
		width: 125rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}
</style>